<template>
  <div class="calculator">
    <!-- 新增容器用于显示计算结果、设置本地信息和记录用水情况 -->
    <div class='wide_div'>
      <!-- 计算结果 -->
      <div id="result-section" class="additional-section">
        <h2>Calculation Result</h2>
        <input ref="resultRef" type="text" v-model="result" readonly />
      </div>

      <!-- 设置本地信息 -->
      <div id="settings-section" class="additional-section">
        <h2>Local Settings</h2>
        <!-- Add your settings UI here -->
      </div>

      <!-- 记录用水情况 -->
      <div id="water-usage-section" class="additional-section">
        <h2>Water Usage Records</h2>
        <!-- Add your water usage UI here -->
      </div>
    </div>

    <!-- div3 -->
    <div class="div3">
      <!-- 说明文字部分 -->
      <div class="description">
        这是一个计算器，可以计算风机或水泵的轴功率和电机功率。
        <br>
        输入计算参数，即可计算功率，显示为轴功率/电机功率。在前两个输入框内回车会自动跳转到下一个输入框，在数量输入框内回车会自动保存数据。
        <br>
        在右侧表格内点击一行数据，可以将数据载入输入框内，点击Delete可以删除数据。点击上面的clear可以清空表格。
        <br>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: "0", // 示例的计算结果，您需要根据实际逻辑设置
    };
  },
};
</script>

<style scoped>
/* 样式 */
.additional-section {
  box-sizing: border-box;
  padding: 10px;
  width: 30%;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;
}

.additional-section h2 {
  text-align: center;
}

.div3 {
  white-space: normal;
  width: 800px;
  height: 300px;
  border: 1px solid #ccc; /* 添加边框样式 */
  border-radius: 10px; /* 添加边框圆角 */
  padding: 10px; /* 添加内边距 */
}
.description {
  /* 样式设置 */
}

.calculator {
  display: flex;
  flex-wrap: wrap;
}

.wide_div {
  display: flex;
  border: 1px solid #ccc; /* 添加边框样式 */
  border-radius: 10px; /* 添加边框圆角 */
  margin: 10px; /* 添加外边距 */
}

/* ... 其他可能需要的样式 ... */
</style>
